﻿<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />



    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/md5.min.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/FileUpload/css/jquery.fileupload.css" />
    <style>
        .active {
            border: 1px solid #159b76;
        }
    </style>



</head>

<body>
    <div id="app">

        <div>
            <ul>
                <p>
                    <button type="button" class="btn btn-danger" @click="vdel">删除</button>

                    <span class="btn btn-success fileinput-button" style="float: right;">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>上传图片</span>
                        <input id="fileupload1" type="file" name="imgFile" multiple>

                    </span>
                </p>
            </ul>
            <ul style="min-height: 400px;">
                <li v-for="uitem in arrayData" :class="{'active':uitem.choose}"
                    style="width: 23%;margin: 5px;padding:5px;height: 200px;float: left;" @click="choose(uitem)">
                    <img :src="uitem.file_name" style="width: 100%;height: 100%; object-fit: cover;border-radius: 10px;
                " />
                </li>
            </ul>
            <ul style="height: 30px;">
                <div class="page">
                    <div>
                        <vue-nav :cur="search.page" :all="all" :allcount="allcount" :callback="callback"></vue-nav>
                    </div>
                </div>
            </ul>

            <ul>
                <p style="text-align: right;">
                    <button type="button" class="btn btn-primary" @click="save">确定</button>
                    <button type="button" class="btn btn-default" @click="close">取消</button>
                </p>
            </ul>


        </div>


    </div>
    <link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="../content/js/config.js"></script>
    <script src="../content/plugin/FileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script src="../content/plugin/FileUpload/js/jquery.iframe-transport.js"></script>
    <script src="../content/plugin/FileUpload/js/jquery.fileupload.js"></script>

    <script>

        $(function () {
            'use strict';
            var url = apiurl + "/uploadImg";
            $('#fileupload1').fileupload({
                autoUpload: true,//是否自动上传
                url: url,
                dataType: 'json',
                done: function (e, data) {

                    console.log(data.result);
                    if (data.result.code == 200) {


                        $.post(apiurl + "/admin/file/add", { file_name: data.result.file, goods_id: GetRequest("goods_id") }, function (_result) {
                            vm.getdata();
                        });



                    } else {
                        swal("上传出错了!", data.result.message, "success");

                    }
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');



        });
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {
                all: 0,
                search: {
                    page: 1,
                    rows: 8
                },
                arrayData: [],
                allcount: 0,
                menulist: [],
                addobj: {
                    parentid: 0
                },
                editobj: {},
                datalist: [],
                statelist: [{ "id": 1, "name": "是" }, { "id": 0, "name": "否" }],
                typelist: [{ "id": "1", "name": "C端" }, { "id": "2", "name": "B端" }, { "id": "1,2", "name": "BC端" }],
                info: {}
            },
            components: {
                'vue-nav': Vnav
            },
            methods: {
                searchdata: function () {
                    this.search.page = 1;
                    this.getdata();
                },

                save: function () {
                    var arr = [];
                    for (var i = 0; i < this.arrayData.length; i++) {
                        if (this.arrayData[i].choose) {
                            arr.push(this.arrayData[i]);
                        }
                    }
                    parent.setimg(arr);
                    x_admin_close();
                },
                close: function () {
                    x_admin_close();
                },

                choose: function (uitem) {
                    if (uitem.choose) {
                        uitem.choose = false;
                    } else {
                        this.info = uitem;
                        uitem.choose = true;
                    }

                },
                getdata: function (_keycontent) {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/file/list", this.search, function (_result) {
                        console.log(_result);
                        var list = _result.data;
                        for (var i = 0; i < list.length; i++) {
                            list[i].choose = false;
                        }
                        self.arrayData = list;
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });

                },
                callback: function (data) {
                    var self = this;
                    this.search.page = data;
                    $.post(apiurl + "/admin/file/list", this.search, function (_result) {
                        var list = _result.data;
                        for (var i = 0; i < list.length; i++) {
                            list[i].choose = false;
                        }

                        self.arrayData = list;
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });
                },

                vdel: function () {
                    var self = this;
                    console.log("self.inf",self.info);
                    swal({
                        title: "确定要删除吗?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: '否',
                        closeOnConfirm: false
                    }, function () {


                        $.ajax({
                            url: apiurl + '/admin/file/del',
                            type: 'DELETE',
                            data: { "ids": self.info.id },
                            success: function (result) {
                                if (result.status == 200) {
                                    swal("系统提示", "已删除", "success");
                                    self.getdata("");
                                } else {
                                    swal("系统提示", "系统异常", "success");
                                }
                            }
                        });

                    });
                },


            },
            created: function () {  //初始化事件里边去调用查询方法

                this.search.goods_id = GetRequest("goods_id");
                this.getdata("");



            }
        });


    </script>
</body>

</html>